import { Card, Table, Tabs, Tag } from 'antd'
import { TrophyOutlined, FireOutlined, RiseOutlined } from '@ant-design/icons'
import './index.scss'

const DataTable = ({ title }) => {
  const columns = [
    {
      title: '排名',
      dataIndex: 'rank',
      key: 'rank',
      width: 70,
      align: 'center',
      render: (rank) => {
        if (rank === 1) {
          return <Tag color="gold" icon={<TrophyOutlined />}>{rank}</Tag>
        } else if (rank === 2) {
          return <Tag color="#bfbfbf" style={{ color: '#595959' }}>{rank}</Tag>
        } else if (rank === 3) {
          return <Tag color="#cd7f32" style={{ color: '#fff' }}>{rank}</Tag>
        }
        return <span className="rank-number">{rank}</span>
      }
    },
    {
      title: '书名',
      dataIndex: 'title',
      key: 'title',
      ellipsis: true,
      render: (text, record) => (
        <div className="book-title">
          <span className="title-text">{text}</span>
          {record.hot && <FireOutlined style={{ color: '#ff4d4f', marginLeft: 8 }} />}
        </div>
      )
    },
    {
      title: '阅读量',
      dataIndex: 'reads',
      key: 'reads',
      width: 100,
      align: 'right',
      render: (text) => <span className="reads-count">{text}</span>
    },
    {
      title: '增长',
      dataIndex: 'growth',
      key: 'growth',
      width: 90,
      align: 'right',
      render: (text) => (
        <span className="growth-rate">
          <RiseOutlined style={{ marginRight: 4 }} />
          {text}
        </span>
      )
    }
  ]

  const data = [
    { key: 1, rank: 1, title: '三体：地球往事三部曲', reads: '156.8w+', growth: '28%', hot: true },
    { key: 2, rank: 2, title: '活着：余华经典作品', reads: '142.3w+', growth: '25%', hot: true },
    { key: 3, rank: 3, title: '百年孤独：马尔克斯代表作', reads: '128.5w+', growth: '22%', hot: false },
    { key: 4, rank: 4, title: '平凡的世界：路遥代表作', reads: '115.2w+', growth: '18%', hot: false },
    { key: 5, rank: 5, title: '红楼梦：中国古典名著', reads: '98.6w+', growth: '15%', hot: false }
  ]

  const tabItems = [
    {
      key: '1',
      label: '热门榜',
      children: (
        <Table 
          columns={columns} 
          dataSource={data} 
          pagination={false}
          size="small"
        />
      )
    },
    {
      key: '2',
      label: '新书榜',
      children: (
        <Table 
          columns={columns} 
          dataSource={data} 
          pagination={false}
          size="small"
        />
      )
    },
    {
      key: '3',
      label: '收藏榜',
      children: (
        <Table 
          columns={columns} 
          dataSource={data} 
          pagination={false}
          size="small"
        />
      )
    }
  ]

  return (
    <Card title={title} className="data-table-card" extra={<a href="#more">查看更多</a>}>
      <Tabs defaultActiveKey="1" size="small" items={tabItems} />
    </Card>
  )
}

export default DataTable
